<template>
  <div>
    <el-card shadow="never" style="margin-bottom: 15px">
      <div class="search-card">
        <div class="search-input">
          <div style="flex-shrink: 0">药剂名称：</div>
          <el-input size="small" style="margin-left: 10px" v-model="searchInfo.name" placeholder="请输入内容"></el-input>
          <el-button size="small" @click="newSearchInfo()" class="newSearch">重置</el-button>
          <el-button type="search" size="small" @click="getpicAndInfo()">查询</el-button>
        </div>
        <div v-show="loginStatus !== 0">
          <el-button size="small" @click="add">添加</el-button>
        </div>
      </div>
    </el-card>

    <el-card shadow="never">
      <el-table :data="picAndInfo" max-height="560" border style="width: 100%; cursor: pointer" @row-click="toDetails">
        <!-- <el-table-column prop="date" label="序号" width="80"> </el-table-column> -->
        <el-table-column header-align="center" align="center" prop="insecticideName" label="杀虫剂名" width="150px">
        </el-table-column>
        <el-table-column header-align="center" prop="emergencyTreatment" label="急救措施" width="300px"> </el-table-column>
        <el-table-column header-align="center" prop="instruction" label="药剂介绍"> </el-table-column>
        <el-table-column header-align="center" prop="remarks" label="备注" width="300px"> </el-table-column>
        <el-table-column header-align="center" prop="attention" label="注意事项"> </el-table-column>
        <el-table-column header-align="center" label="操作" prop="id" v-if="loginStatus !== 0">
          <template slot-scope="updata" >
            <el-button @click.native.stop="upData(updata.row)" type="primary" style="margin-left: 3vh">编辑</el-button>
          <el-button @click.native.stop="confirmDel(updata.row)" type="primary" style="margin: 2vh 0 0 3vh">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="pageInfo.pagenum" :page-sizes="[10, 14, 16, 20]" :page-size="pageInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination></el-card>

    <el-dialog title="详细信息" :visible.sync="dialogVisible">
      <table class="tableInfo" :model="addForm" id="printTest">
        <thead></thead>
        <tbody>
          <tr>
            <td class="tdName">英文名</td>
            <br />
            <td class="tdInfo">{{ addForm.englishName }}</td>
          </tr>
          <tr>
            <td class="tdName">杀虫剂名</td>
            <br />
            <td class="tdInfo">{{ addForm.insecticideName }}</td>
          </tr>
          <tr>
            <td class="tdName">活性成分</td>
            <br />
            <td class="tdInfo">{{ addForm.activeConstituent }}</td>
          </tr>
          <tr>
            <td class="tdName">证书编号</td>
            <br />
            <td class="tdInfo">{{ addForm.certificateNumber }}</td>
          </tr>
          <tr>
            <td class="tdName">介绍</td>
            <br />
            <td class="tdInfo" align="left">{{ addForm.instruction }}</td>
          </tr>
          <tr>
            <td class="tdName">紧急处理</td>
            <br />
            <td class="tdInfo" align="left">{{ addForm.emergencyTreatment }}</td>
          </tr>
          <tr>
            <td class="tdName">注意事项</td>
            <br />
            <td class="tdInfo" align="left">{{ addForm.attention }}</td>
          </tr>
          <tr>
            <td class="tdName">备注</td>
            <br />
            <td class="tdInfo" align="left">{{ addForm.remarks }}</td>
          </tr>
        </tbody>
      </table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"> 关闭 </el-button>
      </span>
    </el-dialog>

    <!-- 编辑表单 -->
    <el-dialog
          width="40%"
          title="编辑"
          :visible.sync="updataVisible"
          :before-close="handleClose"
          >
          <el-form ref="updataInfo" :model="updataInfo">
          <el-form-item label="英文名">
          <el-input v-model="updataInfo.englishName"/>
         </el-form-item>
          <el-form-item label="杀虫剂名">
          <el-input v-model="updataInfo.insecticideName"/>
         </el-form-item>
          <el-form-item label="活性成分">
          <el-input v-model="updataInfo.activeConstituent"/>
         </el-form-item>
          <el-form-item label="证书编号">
          <el-input v-model="updataInfo.certificateNumber"/>
         </el-form-item>
          <el-form-item label="对应病症">
          <el-input v-model="updataInfo.diseaseName"/>
         </el-form-item>
          <el-form-item label="治疗效果">
          <el-input v-model="updataInfo.effect"/>
         </el-form-item>
          <el-form-item label="药剂类型">
          <el-input v-model="updataInfo.type"/>
         </el-form-item>
         <el-form-item label="介绍内容">
         <el-input type="textarea" v-model="updataInfo.instruction" :autosize="{minRows:4,maxRows:6}"></el-input>
       </el-form-item>
       <el-form-item label="紧急处理">
          <el-input type="textarea" v-model="updataInfo.emergencyTreatment" :autosize="{minRows:4,maxRows:6}"/>
         </el-form-item>
         <el-form-item label="注意事项">
          <el-input type="textarea" v-model="updataInfo.attention" :autosize="{minRows:4,maxRows:6}"/>
         </el-form-item>
         <el-form-item label="备注">
          <el-input type="textarea" v-model="updataInfo.remarks" :autosize="{minRows:4,maxRows:6}"/>
         </el-form-item>
        </el-form>
         <span slot="footer" class="dialog-footer">
          <el-button @click="updataVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmUpdata">确定</el-button>
        </span>
        </el-dialog>  

      <!-- 新增表单 -->
      <el-dialog
          width="40%"
          title="新增"
          :visible.sync="addVisible"
          :before-close="handleClose"
          >
          <el-form ref="addInfo" :model="addInfo">
          <el-form-item label="英文名">
          <el-input v-model="addInfo.englishName"/>
         </el-form-item>
          <el-form-item label="杀虫剂名">
          <el-input v-model="addInfo.insecticideName"/>
         </el-form-item>
          <el-form-item label="活性成分">
          <el-input v-model="addInfo.activeConstituent"/>
         </el-form-item>
          <el-form-item label="证书编号">
          <el-input v-model="addInfo.certificateNumber"/>
         </el-form-item>
          <el-form-item label="对应病症">
          <el-input v-model="addInfo.diseaseName"/>
         </el-form-item>
          <el-form-item label="治疗效果">
          <el-input v-model="addInfo.effect"/>
         </el-form-item>
          <el-form-item label="药剂类型">
          <el-input v-model="addInfo.type"/>
         </el-form-item>
         <el-form-item label="介绍内容">
         <el-input type="textarea" v-model="addInfo.instruction" :autosize="{minRows:4,maxRows:6}"></el-input>
       </el-form-item>
       <el-form-item label="紧急处理">
          <el-input type="textarea" v-model="addInfo.emergencyTreatment" :autosize="{minRows:4,maxRows:6}"/>
         </el-form-item>
         <el-form-item label="注意事项">
          <el-input type="textarea" v-model="addInfo.attention" :autosize="{minRows:4,maxRows:6}"/>
         </el-form-item>
         <el-form-item label="备注">
          <el-input type="textarea" v-model="addInfo.remarks" :autosize="{minRows:4,maxRows:6}"/>
         </el-form-item>
        </el-form>
         <span slot="footer" class="dialog-footer">
          <el-button @click="addVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmAdd">确定</el-button>
        </span>
        </el-dialog>  
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageInfo: {
        // 当前页码
        pagenum: 1,
        // 每页显示条数
        pagesize: 10,
      },
      total: 10,
      addForm:{},
      dialogVisible: false,
      // addForm: {},
      pageInfo: {
        // 当前页码
        pagenum: 1,
        // 每页显示条数
        pagesize: 40,
      },
      total: 10,
      flag: true,
      searchInfo: {
        name: '',
      },
      tableData: [],
      picAndInfo: [],
      loading: true,

      updataVisible:false,
      loginStatus:0,
      updataName:'',
      updataInfo:{
        activeConstituent: "",
        attention: "",
        certificateNumber: "",
        diseaseName: "",
        effect: "",
        emergencyTreatment: "",
        englishName: "",
        id: 0,
        insecticideName: "",
        instruction: "",
        remarks: "",
        type: ""
      },

      addVisible:false,
      addInfo:{
        activeConstituent: "",
        attention: "",
        certificateNumber: "",
        diseaseName: "",
        effect: "",
        emergencyTreatment: "",
        englishName: "",
        id: 0,
        insecticideName: "",
        isDeleted:0,
        instruction: "",
        remarks: "",
        type: "",
      },
      delVisible:false,
      delName:''
    }
  },
  created() {
    this.getDiseaseInfo()
  },
  mounted() {
    this.getpicAndInfo()
    //获取状态码，判断是否为管理员或专家
    this.loginStatus = JSON.parse(window.localStorage.getItem('loginStatus'))
  },

  methods: {
    // 重置查询条件
    newSearchInfo() {
      this.searchInfo.name = ''
    },
    // 分页获取疾病数据
    async getDiseaseInfo() {
      const { data: res } = await this.$http.get(`/orange_service/insecticide/getAllInsecticide/${this.pageInfo.pagenum}/${this.pageInfo.pagesize}`)
      console.log(res)
      if (res.code === 0) {
        this.picAndInfo = res.data.rows
        this.addInfo.id = res.data.rows[res.data.total - 1].id + 1
      }
      this.loading = false
    },
    toDetails(row) {
      // this.dialogVisible = true
      console.log(row, '列')
      this.addForm = row
      this.dialogVisible = true
    },

    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => { })
    },
    // 查看详情
    openedDetails(row) {
      console.log('点击', row)
      // this.$router.push({ path: '/medication',query: { id: row.diseaseId }})
    },
    //详细信息
    async getpicAndInfo() {
      this.loading = true
      if (this.searchInfo.name) {
        const { data: res } = await this.$http.get(`/orange_service/insecticide/getpicAndName/{insecticideName}?insecticideName=${this.searchInfo.name}`)
        console.log(res, '农药11')
        console.log(this.searchInfo.name)
        if (res.code === 0) {
          this.picAndInfo = res.data.insecticideVoArrayList
          this.addForm = res.data.insecticideVoArrayList[0]
          if (!res.data.insecticideVoArrayList[0]) {
            this.$message.error("查询失败")
          } else {
            this.$message.success('查询成功')
          }
          this.loading = false
        }
        // console.log(this.picAndInfo)
        // console.log('add',this.addForm)
        // console.log(JSON.parse(this.picAndInfo));
      } else if (this.searchInfo.name === '') {
        const { data: res } = await this.$http.get(`/orange_service/insecticide/getAllInsecticide/${this.pageInfo.pagenum}/${this.pageInfo.pagesize}`)
        console.log(res)
        if (res.code === 0) {
          this.picAndInfo = res.data.rows
          this.addForm = res.data.total
        }
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageInfo.pagesize = val
      this.getDiseaseInfo()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.pageInfo.pagenum = val
      this.getDiseaseInfo()
    },
    //新增功能
    add(){
      //打开表单
      this.addVisible = true
      //每次进入添加清空表单
        this.addInfo.activeConstituent= ""
        this.addInfo.attention= ""
        this.addInfo.certificateNumber= ""
        this.addInfo.diseaseName= ""
        this.addInfo.effect= ""
        this.addInfo.emergencyTreatment= ""
        this.addInfo.englishName= ""
        this.addInfo.insecticideName= ""
        this.addInfo.instruction= ""
        this.addInfo.remarks= ""
        this.addInfo.type= ""
    },
    //确认新增
    async confirmAdd(){
      console.log(this.addInfo)
      //发送接口
      const { data: res } = await this.$http.post(`/orange_service/insecticide/insertInsecticide`, this.addInfo)
      console.log(res)
      if (res.code === 0) {
        this.$message.success('添加成功！')
      } else {
        this.$message.error('添加失败！')
      }
      //关闭表单
      this.addVisible = false
    },
    //编辑功能
    upData(row){
      //打开表单
      this.updataVisible = true
      console.log(row)
      this.updataInfo = row
    },
    //确认编辑
    async confirmUpdata(){
      //关闭表单
      this.innerUpadatVisible = false
      this.updataVisible = false
      console.log(this.updataInfo)
      //发送接口
      const { data: res } = await this.$http.put(`/orange_service/insecticide/updateInsecticide`, this.updataInfo)
      console.log(res)
      if (res.code === 0) {
        this.$message.success('编辑成功！')
        window.location.reload();
      } else {
        this.$message.error('编辑失败！')
      }
      console.log(this.updataInfo)
    },
    //确认删除
    confirmDel(row){
        const h = this.$createElement;
        this.$msgbox({
          title: '删除',
          message: h('p', null, [
            h('span', null, '确认删除 '),
            h('i', { style: 'color: red' }, row.insecticideName +'吗')
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: async (action, instance, done) => {
            if (action === 'confirm') {
              //发送请求
              const { data: res } = await this.$http.delete(`/orange_service/insecticide/deleteInsecticide/${row.id}`)
              console.log(res)
              done()
              if (res.code === 0) {
              this.$message.success('删除成功！')
              window.location.reload();
            } else {
              this.$message.error('删除失败！')
            }
            } else {
              done()
            }
          }
        });


  // const h = this.$createElement;
  //       this.$msgbox({
  //         title: '消息',
  //         message: h('p', null, [
  //           h('span', null, '内容可以是 '),
  //           h('i', { style: 'color: teal' }, 'VNode')
  //         ]),
  //         showCancelButton: true,
  //         confirmButtonText: '确定',
  //         cancelButtonText: '取消',
  //         beforeClose: (action, instance, done) => {
  //           if (action === 'confirm') {
  //             instance.confirmButtonLoading = true;
  //             instance.confirmButtonText = '执行中...';
  //             setTimeout(() => {
  //               done();
  //               setTimeout(() => {
  //                 instance.confirmButtonLoading = false;
  //               }, 300);
  //             }, 3000);
  //           } else {
  //             done();
  //           }
  //         }
  //       }).then(action => {
  //         this.$message({
  //           type: 'info',
  //           message: 'action: ' + action
  //         });
  //       });
     },
   },
}
</script>

<style scoped>
.search-card {
  display: flex;
  align-items: center;
  font-size: 15px;
  justify-content: space-between;
}

.search-input {
  display: flex;
  align-items: center;
}

.el-button--search {
  background: rgb(8, 46, 83);
  color: #fff;
}

.tableInfo {
  border-collapse: collapse;
  margin: 0 auto;
  text-align: center;
}

.tableInfo td,
.tableInfo th {
  border: 1px solid #333;
  color: #666;
  height: 60px;
}

.tdName {
  font-size: 18px;
  width: 100px;
  background-color: #cad9ea;
  margin-left: 0%;
}

.tdInfo {
  font-size: 16px;
}
.newSearch{
  margin-left: 2vh;
}

.isShow{
  display: none;
}
</style>
